<template>
  <view class="box">
    <image
        v-show="isLoad"
        class="img2"
        :mode="mode"
        :style="{
          borderRadius: borderRadius
        }"
        :src="src" @load="loadBySrc(src)">
    </image>
  </view>
</template>


<script>
export default {
  props: {
    src: {
      type: String,
      default: ""
    },
    mode: {
      type: String,
      default: "aspectFit"
    },
    borderRadius: {
      type: String,
      default: ""
    }

  },
  data() {
    return {
      // 是否加载完成
      isLoad: false
    };
  },
  created() {
    this.$kt.event.on(`ktImageLoad:${this.src}`, () => {
      this.$emit("load");
    });
  },
  methods: {
    loadBySrc(src) {
      this.$kt.event.emit(`ktImageLoad:${src}`);
      console.log("loadBySrc", src);
      this.isLoad = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100% !important;
  height: 100% !important;

  .img2 {
    width: 100%;
    height: 100%;
  }
}

</style>
